<template>
  <div id="map-container">
    <!-- <l-map ref="map" v-model:zoom="zoom" :center="center" :use-global-leaflet="false">
      <l-tile-layer
        url="https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}"
        layer-type="base"
        name="高德地图"
        :attribution="'&copy; <a href=\'https://www.amap.com/\'>高德地图</a>'"
      ></l-tile-layer>
    </l-map> -->
    <div id="map" style="width: 100%; height: 100%;">

    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
// import L from 'leaflet';
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet.pm";

const zoom = ref(13);
const center = ref([36.0671, 120.3523]); // 默认位置：青岛
const map = ref(null);
let featureLayer;

onMounted(() => {
  nextTick(() => {
    map.value = L.map('map').setView(center.value, 11);
    L.tileLayer('http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
      attribution: '&copy; <a href="https://www.amap.com/">高德地图</a>',
      subdomains: ['1', '2', '3', '4'],
      minZoom: 3,
      maxZoom: 18,
      detectRetina: true,
      noWrap: true,
      noAttribution: true,
      noUtfGrid: true,
      noTileCache: true,
    }).addTo(map.value);
    featureLayer = L.featureGroup().addTo(map.value);
  })



});

// --- 地图操作 API ---
// 这些方法将被智能代理调用

const clearMap = () => {
  if (featureLayer) {
    featureLayer.clearLayers();
    return "已清除地图上的所有绘制内容。";
  }
  return "地图未初始化。";
};

const drawPoint = ({ lat, lng, popupText = "标记点" }) => {
  if (featureLayer) {
    const marker = L.marker([lat, lng]).addTo(featureLayer);
    marker.bindPopup(popupText).openPopup();
    setMapView([lat, lng], 15);
    return `已在坐标(${lat}, ${lng})处绘制标记点，标注为"${popupText}"。`;
  }
  return "地图未初始化。";
};

const drawPolyline = ({ coordinates, color = 'blue', popupText = "路线" }) => {
  if (featureLayer) {
    const latlngs = coordinates.map(c => [c.lat, c.lng]);
    const line = L.polyline(latlngs, { color });
    featureLayer.addLayer(line);
    line.bindPopup(popupText).openPopup();
    map.value.fitBounds(line.getBounds());
    return `已绘制一条包含${latlngs.length}个点的路线。`;
  }
  return "地图未初始化。";
};

const drawPolygon = ({ coordinates, color = 'green', opacity = 0.5, popupText = "区域" }) => {
  if (featureLayer) {
    const latlngs = coordinates.map(c => [c.lat, c.lng]);
    const polygon = L.polygon(latlngs, { color, fillOpacity: opacity });
    featureLayer.addLayer(polygon);
    polygon.bindPopup(popupText).openPopup();
    map.value.fitBounds(polygon.getBounds());
    return `已绘制一个包含${latlngs.length}个顶点的区域。`;
  }
  return "地图未初始化。";
};

const setMapView = (center, newZoom) => {
  if (map.value) {
    map.value.setView(center, newZoom || zoom.value);
    return `已将地图视图中心设置为${center}。`;
  }
  return "地图未初始化。";
}

// 暴露地图操作方法供父组件调用
defineExpose({
  clearMap,
  drawPoint,
  drawPolyline,
  drawPolygon,
  setMapView,
});

</script>

<style scoped>
#map-container {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
}
</style>